<template>
  <div class="login-container">
    <a-row type="flex" justify="center" align="middle">
      <a-col :xxl="7" :xl="8" :lg="10" :span="12">
        <login-left class="login-left" :shouldShowIcon="shouldShowIcon" />
      </a-col>
      <a-col :xxl="7" :xl="8" :lg="10" :span="12">
        <login-right class="login-right" :shouldShowIcon="shouldShowIcon" />
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts" setup>
import LoginLeft from "@/pages/login/login-left.vue";
import LoginRight from "@/pages/login/login-right.vue";
import { isLockinEnv } from "@/utils/common";
import { useRouter } from "vue-router";
import { onBeforeMount, ref, onMounted } from "vue";
import { useStore } from "@/store/index";

const store = useStore();
const $router = useRouter();
const shouldShowIcon = ref(true);
const handleSetTitle = () => {
  const $favicon: any = document.querySelector("#favicon");
  const isLogin =
    location.pathname === "/login" &&
    !location.href.includes("/login?with_blank=1");
  const shouldShowIcon =
    localStorage.getItem("shouldShowIcon") === "true" || isLogin;
  document.title = shouldShowIcon ? "鹿客明智云" : "管理平台";
  $favicon.href = shouldShowIcon ? "/favicon-lockin.ico" : "/blank.ico";
};
onBeforeMount(() => {
  const with_blank: any = $router.currentRoute.value.query?.with_blank;
  if (isLockinEnv() && with_blank) {
    shouldShowIcon.value = false;
    localStorage.setItem("shouldShowIcon", String(shouldShowIcon.value));
    handleSetTitle();
  } else {
    localStorage.setItem("shouldShowIcon", "true");
  }
});
</script>

<style>
#app {
  overflow: auto;
}
</style>

<style lang="less" scoped>
.login-container {
  min-height: 100vh;
  background: #eff1f7;

  .ant-row {
    min-height: 100vh;

    .ant-col {
      position: relative;
      background: #fff;
      padding-bottom: 70%;
      box-shadow: 0 5px 50px 0 rgb(0 0 0 / 15%);

      .login-left,
      .login-right {
        width: 100%;
        height: 100%;
        position: absolute;
      }
    }

    @media (min-width: 992px) {
      .ant-col {
        padding-bottom: 60%;
      }
    }

    @media (min-width: 1200px) {
      .ant-col {
        padding-bottom: 45%;
      }
    }

    @media (min-width: 1600px) {
      .ant-col {
        padding-bottom: 40%;
      }
    }
  }
}
</style>
